<template>
  <div class="container">
    <el-card class="box-card">
      <el-row>
        <el-col :span="5">
          <div class="grid-content bg-purple-dark">
            <el-radio-group v-model="radio1">
              <el-radio-button label="1">正常用户</el-radio-button>
              <el-radio-button label="2">封禁用户</el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="bg-purple-dark">
            <el-radio-group class="grid-small" v-model="radio3" size="small">
              <el-radio-button label="1">时间 <i class="el-icon-top"></i></el-radio-button>
              <el-radio-button label="0">时间 <i class="el-icon-bottom"></i></el-radio-button>
            </el-radio-group>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-dark">
            <el-popover placement="right" width="400" trigger="click" v-model="isvisible">
              <CarInfo :userinfo="userinfo" @updata="updata"></CarInfo>
              <el-button slot="reference" round>添加用户</el-button>
            </el-popover>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content bg-purple-dark">
            <el-input placeholder="点击左侧切换搜索方式" v-model="input1" @keyup.enter.native="queryId">
              <el-button v-if="isstatuuser" slot="prepend" @click.native="isstatuuser = !isstatuuser"
                >请输入用户ID<i class="el-icon-refresh"></i>
              </el-button>
              <el-button v-else slot="prepend" @click.native="isstatuuser = !isstatuuser"
                >请输入用户名<i class="el-icon-refresh"></i
              ></el-button>
              <el-button slot="append" class="el-icon-search" @click="queryId"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <el-table
        :data="tableData"
        highlight-current-row
        border
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column prop="id" label="用户ID" width="80"> </el-table-column>
        <el-table-column prop="username" label="用户名"> </el-table-column>
        <el-table-column prop="nickname" label="昵称"> </el-table-column>
        <el-table-column prop="sex" label="性别" width="80"> </el-table-column>
        <el-table-column prop="surname" label="姓氏" width="80"> </el-table-column>
        <el-table-column prop="phone" label="电话"> </el-table-column>
        <el-table-column prop="province.province_name" label="地区"> </el-table-column>
        <el-table-column prop="register_time" label="注册时间">
          <template slot-scope="scope">{{ scope.row.register_time | data }}</template>
        </el-table-column>
        <el-table-column prop="statu" label="用户状态">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.state" type="danger">封禁</el-tag>
            <el-tag v-else type="success">正常</el-tag>
          </template>
        </el-table-column>
        <el-table-column v-if="isstatu" prop="block_time" label="封禁时间">
          <template slot-scope="scope">{{ scope.row.block_time | data }}</template>
        </el-table-column>
        <el-table-column prop="nickname" width="210" label="操作">
          <template slot-scope="scope">
            <div class="scope">
              <div>
                <el-popconfirm
                  v-if="!isstatu"
                  :title="'确定封禁' + scope.row.nickname + '吗？'"
                  @confirm="freeze(scope.row)"
                >
                  <el-button slot="reference" size="mini" type="danger">封禁</el-button>
                </el-popconfirm>
              </div>
              <div>
                <el-popconfirm v-if="!isstatu" title="确定删除吗？">
                  <el-button slot="reference" size="mini" type="warning">删除</el-button>
                </el-popconfirm>
              </div>
              <div>
                <el-popconfirm
                  v-if="isstatu"
                  :title="'确定解封' + scope.row.nickname + '吗？'"
                  @confirm="unfreeze(scope.row)"
                >
                  <el-button slot="reference" size="mini" type="success">解封</el-button>
                </el-popconfirm>
              </div>
              <div v-if="!isstatu">
                <el-dialog title="编辑个人信息" :visible.sync="visible" width="30%" :before-close="handleClose">
                  <CarInfo :userinfo="scoperow" @updata="updata"></CarInfo>
                </el-dialog>
                <el-button size="mini" @click="dialog(scope.row)">编辑</el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="radio">
        <el-button size="mini" @click="radio2 = 1">首页</el-button>
        <el-button size="mini" @click="radio2--">上一页</el-button>
        <el-button size="mini" @click="radio2++">下一页</el-button>
        <el-button size="mini" @click="radio2 = 4">尾页</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { queryProvinces, queryCities, sendComment, queryComment, queryUserFoId, queryUsername } from '@/api/user'
import CarInfo from './components/CarInfo.vue'
export default {
  name: 'XtxCartPage',
  data() {
    return {
      isstatuuser: true,
      scoperow: {},
      userinfo: [],
      isvisible: false,
      visible: false,
      isstatu: false, // true为封
      radio2: 1,
      gridData: [],
      input1: '',
      radio1: 1,
      radio3: 1,
      queryData: {
        sortCode: 1, //默认时间升序
        pageNum: 1, //默认当前页码
        pageSize: 10 //默认单页数量
      },
      tableData: []
    }
  },
  watch: {
    // 跳转页
    radio2: function (value) {
      if (value < 1) {
        this.radio2 = 1
      } else {
        this.queryData.pageNum = value
        if (this.radio1 == 2) {
          this.queryAllBan()
        } else {
          this.queryAllUser()
        }
      }
    },
    //  时间排序
    radio3: function (value) {
      this.queryData.sortCode = value
      if (this.radio1 == 2) {
        this.queryAllBan()
      } else {
        this.queryAllUser()
      }
    },
    // 正常&封禁
    radio1: function (value) {
      if (value == 2) {
        this.queryAllBan()
      }
      if (value == 1) {
        this.queryAllUser()
      }
    }
  },
  components: {
    CarInfo
  },
  methods: {
    dialog(scope) {
      this.visible = true
      this.scoperow = scope
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(() => {
          done()
        })
        .catch(() => {})
    },
    updata(a) {
      console.log(a)
      if (a) {
        this.visible = false
      } else {
        this.isvisible = false
      }
      this.queryAllUser()
    },
    // id搜索用户
    async queryId() {
      if (this.isstatuuser) {
        const res = queryUserFoId({ id: this.input1 })
        res.then(a => {
          if (a.data.statu == 200) {
            const data = a.data.data
            this.isstatu = data.state
            this.tableData = []
            this.tableData.push(data)
          } else {
            this.$message.warning(a.data.msg)
          }
        })
      } else {
        const res = queryUsername({ username: this.input1 })
        res.then(a => {
          if (a.data.statu == 200) {
            console.log(a)
            const data = a.data.data
            this.isstatu = data.state
            this.tableData = []
            this.tableData.push(data)
          } else {
            this.$message.warning(a.data.msg)
          }
        })
      }
    },
    // 封禁
    async freeze(row) {
      await sendComment({ id: row.id })
      this.queryAllUser()
    },
    // 删除
    async exile() {},
    // 解封
    async unfreeze(row) {
      const res = await queryComment({ id: row.id })
      if (res.data.statu == 200) {
        this.$message.success(res.data.msg)
        this.queryAllBan()
      } else {
        this.$message.warning(res.data.msg)
      }
    },
    async queryAllBan() {
      const res = queryCities({ ...this.queryData })
      res.then(i => {
        if (i.data.statu == 200) {
          const list = i.data.data.map(item => {
            return { block_time: item.block_time, ...item.user, state: 1 }
          })
          this.tableData = list
          this.isstatu = true
        }
      })
    },
    async queryAllUser() {
      const res = queryProvinces({ ...this.queryData })
      res.then(data => {
        if (data.data.statu == 200) {
          this.tableData = data.data.data
          this.tableData.forEach(i => (i.state = 0))
          this.isstatu = false
        }
      })
    }
  },
  created() {
    this.queryAllUser()
  },
  filters: {
    data: value => {
      const year = new Date(value).getFullYear()
      let month = new Date(value).getMonth() + 1
      let date = new Date(value).getDate()
      return year + '-' + month + '-' + date
    }
  }
}
</script>
<style lang="less" scoped>
.grid-small {
  margin-top: 6px;
}
.radio {
  margin: 20px 20px 0 0;
}
.box-card {
  margin-top: 5px;
}
.scope {
  display: flex;
  justify-content: space-around;
}
</style>
